<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Palette</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../dist/ionic/ionic.esm.js"></script>
    <link id="palette" rel="stylesheet" />

    <style>
      .container {
        display: flex;

        justify-content: center;

        flex-wrap: wrap;

        border-bottom: 1px solid #ddd;
        padding: 20px 0;
      }

      .header {
        width: 100%;

        margin-top: 0;
      }

      .color-block {
        display: flex;
        align-items: center;

        background: var(--ion-color-contrast);

        margin: 4px;
      }

      .color-block > div {
        padding: 10px;
      }

      .ion-color {
        color: var(--ion-color-base);
      }

      .ion-color-background {
        background: var(--ion-color-base);
        color: var(--ion-color-contrast);
      }

      .ion-color-background-shade {
        background: var(--ion-color-shade);
        color: var(--ion-color-contrast);
      }

      .ion-color-background-tint {
        background: var(--ion-color-tint);
        color: var(--ion-color-contrast);
      }

      .ion-color-background-08 {
        background: rgb(var(--ion-color-base-rgb), 0.08);
        color: var(--ion-color-base);
      }

      .ion-color-background-12 {
        background: rgb(var(--ion-color-base-rgb), 0.12);
        color: var(--ion-color-base);
      }

      .ion-color-background-16 {
        background: rgb(var(--ion-color-base-rgb), 0.16);
        color: var(--ion-color-base);
      }
    </style>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Palette</ion-title>
        </ion-toolbar>
        <ion-toolbar>
          <ion-segment value="default" class="palette-picker">
            <ion-segment-button value="default">
              <ion-label>Default (Light)</ion-label>
            </ion-segment-button>
            <ion-segment-button value="dark">
              <ion-label>Dark</ion-label>
            </ion-segment-button>
          </ion-segment>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content" class="ion-text-center" no-bounce>
        <div class="container">
          <h3 class="header">Text</h3>
          <div class="color-block ion-color-primary">
            <div class="ion-color">Primary</div>
          </div>
          <div class="color-block ion-color-secondary">
            <div class="ion-color">Secondary</div>
          </div>
          <div class="color-block ion-color-tertiary">
            <div class="ion-color">Tertiary</div>
          </div>
          <div class="color-block ion-color-success">
            <div class="ion-color">Success</div>
          </div>
          <div class="color-block ion-color-warning">
            <div class="ion-color">Warning</div>
          </div>
          <div class="color-block ion-color-danger">
            <div class="ion-color">Danger</div>
          </div>
          <div class="color-block ion-color-light">
            <div class="ion-color">Light</div>
          </div>
          <div class="color-block ion-color-medium">
            <div class="ion-color">Medium</div>
          </div>
          <div class="color-block ion-color-dark">
            <div class="ion-color">Dark</div>
          </div>
        </div>

        <div class="container">
          <h3 class="header">Background</h3>
          <div class="color-block ion-color-primary">
            <div class="ion-color-background">Primary</div>
          </div>
          <div class="color-block ion-color-secondary">
            <div class="ion-color-background">Secondary</div>
          </div>
          <div class="color-block ion-color-tertiary">
            <div class="ion-color-background">Tertiary</div>
          </div>
          <div class="color-block ion-color-success">
            <div class="ion-color-background">Success</div>
          </div>
          <div class="color-block ion-color-warning">
            <div class="ion-color-background">Warning</div>
          </div>
          <div class="color-block ion-color-danger">
            <div class="ion-color-background">Danger</div>
          </div>
          <div class="color-block ion-color-light">
            <div class="ion-color-background">Light</div>
          </div>
          <div class="color-block ion-color-medium">
            <div class="ion-color-background">Medium</div>
          </div>
          <div class="color-block ion-color-dark">
            <div class="ion-color-background">Dark</div>
          </div>
        </div>

        <div class="container">
          <h3 class="header">Background Shade</h3>
          <div class="color-block ion-color-primary">
            <div class="ion-color-background-shade">Primary</div>
          </div>
          <div class="color-block ion-color-secondary">
            <div class="ion-color-background-shade">Secondary</div>
          </div>
          <div class="color-block ion-color-tertiary">
            <div class="ion-color-background-shade">Tertiary</div>
          </div>
          <div class="color-block ion-color-success">
            <div class="ion-color-background-shade">Success</div>
          </div>
          <div class="color-block ion-color-warning">
            <div class="ion-color-background-shade">Warning</div>
          </div>
          <div class="color-block ion-color-danger">
            <div class="ion-color-background-shade">Danger</div>
          </div>
          <div class="color-block ion-color-light">
            <div class="ion-color-background-shade">Light</div>
          </div>
          <div class="color-block ion-color-medium">
            <div class="ion-color-background-shade">Medium</div>
          </div>
          <div class="color-block ion-color-dark">
            <div class="ion-color-background-shade">Dark</div>
          </div>
        </div>

        <div class="container">
          <h3 class="header">Background Tint</h3>
          <div class="color-block ion-color-primary">
            <div class="ion-color-background-tint">Primary</div>
          </div>
          <div class="color-block ion-color-secondary">
            <div class="ion-color-background-tint">Secondary</div>
          </div>
          <div class="color-block ion-color-tertiary">
            <div class="ion-color-background-tint">Tertiary</div>
          </div>
          <div class="color-block ion-color-success">
            <div class="ion-color-background-tint">Success</div>
          </div>
          <div class="color-block ion-color-warning">
            <div class="ion-color-background-tint">Warning</div>
          </div>
          <div class="color-block ion-color-danger">
            <div class="ion-color-background-tint">Danger</div>
          </div>
          <div class="color-block ion-color-light">
            <div class="ion-color-background-tint">Light</div>
          </div>
          <div class="color-block ion-color-medium">
            <div class="ion-color-background-tint">Medium</div>
          </div>
          <div class="color-block ion-color-dark">
            <div class="ion-color-background-tint">Dark</div>
          </div>
        </div>

        <div class="container">
          <h3 class="header">Background 8%</h3>
          <div class="color-block ion-color-primary">
            <div class="ion-color-background-08">Primary</div>
          </div>
          <div class="color-block ion-color-secondary">
            <div class="ion-color-background-08">Secondary</div>
          </div>
          <div class="color-block ion-color-tertiary">
            <div class="ion-color-background-08">Tertiary</div>
          </div>
          <div class="color-block ion-color-success">
            <div class="ion-color-background-08">Success</div>
          </div>
          <div class="color-block ion-color-warning">
            <div class="ion-color-background-08">Warning</div>
          </div>
          <div class="color-block ion-color-danger">
            <div class="ion-color-background-08">Danger</div>
          </div>
          <div class="color-block ion-color-light">
            <div class="ion-color-background-08">Light</div>
          </div>
          <div class="color-block ion-color-medium">
            <div class="ion-color-background-08">Medium</div>
          </div>
          <div class="color-block ion-color-dark">
            <div class="ion-color-background-08">Dark</div>
          </div>
        </div>

        <div class="container">
          <h3 class="header">Background 12%</h3>
          <div class="color-block ion-color-primary">
            <div class="ion-color-background-12">Primary</div>
          </div>
          <div class="color-block ion-color-secondary">
            <div class="ion-color-background-12">Secondary</div>
          </div>
          <div class="color-block ion-color-tertiary">
            <div class="ion-color-background-12">Tertiary</div>
          </div>
          <div class="color-block ion-color-success">
            <div class="ion-color-background-12">Success</div>
          </div>
          <div class="color-block ion-color-warning">
            <div class="ion-color-background-12">Warning</div>
          </div>
          <div class="color-block ion-color-danger">
            <div class="ion-color-background-12">Danger</div>
          </div>
          <div class="color-block ion-color-light">
            <div class="ion-color-background-12">Light</div>
          </div>
          <div class="color-block ion-color-medium">
            <div class="ion-color-background-12">Medium</div>
          </div>
          <div class="color-block ion-color-dark">
            <div class="ion-color-background-12">Dark</div>
          </div>
        </div>

        <div class="container">
          <h3 class="header">Background 16%</h3>
          <div class="color-block ion-color-primary">
            <div class="ion-color-background-16">Primary</div>
          </div>
          <div class="color-block ion-color-secondary">
            <div class="ion-color-background-16">Secondary</div>
          </div>
          <div class="color-block ion-color-tertiary">
            <div class="ion-color-background-16">Tertiary</div>
          </div>
          <div class="color-block ion-color-success">
            <div class="ion-color-background-16">Success</div>
          </div>
          <div class="color-block ion-color-warning">
            <div class="ion-color-background-16">Warning</div>
          </div>
          <div class="color-block ion-color-danger">
            <div class="ion-color-background-16">Danger</div>
          </div>
          <div class="color-block ion-color-light">
            <div class="ion-color-background-16">Light</div>
          </div>
          <div class="color-block ion-color-medium">
            <div class="ion-color-background-16">Medium</div>
          </div>
          <div class="color-block ion-color-dark">
            <div class="ion-color-background-16">Dark</div>
          </div>
        </div>
      </ion-content>
    </ion-app>

    <script>
      const palettePicker = document.querySelector('.palette-picker');

      palettePicker.addEventListener('ionChange', (ev) => {
        const palette = event.detail && event.detail.value;
        togglePalette(palette);
      });

      function togglePalette(palette) {
        let cssFile = `/css/palettes/${palette}.always.css`;
        if (palette === 'default') {
          // TODO FW-5862 update this to not
          // load a file when default is set. The light
          // palette is automatically set when importing ionic.bundle.css
          cssFile = `/src/themes/test/default.css`;
        }

        var oldLink = document.getElementById('palette');

        var newLink = document.createElement('link');
        newLink.setAttribute('id', 'palette');
        newLink.setAttribute('rel', 'stylesheet');
        newLink.setAttribute('type', 'text/css');
        newLink.setAttribute('href', cssFile);

        document.getElementsByTagName('head').item(0).replaceChild(newLink, oldLink);
      }
    </script>
  </body>
</html>
